<!-- 过去一年水质评价统计 -->
<template>
    <div class="w-100 h-100">
      <fakeLenfend
      style="margin-top: 20px;"
        :color="useOptions().colors.value"
        :text="['Ⅰ类', 'Ⅱ类','Ⅲ类','Ⅳ类','Ⅴ类','Ⅵ类']"
      >
      </fakeLenfend>
  
      <div class="w-100" style="height: 80%">
        <div
          id="gqynszpjtj"
          class="w-100"
          style="height: 100%; position: relative"
        ></div>
      </div>
    </div>
  </template>
  
  <script setup lang="ts">
  import * as echarts from "echarts";
  import fakeLenfend from "@/components/project/fakeLegend.vue";
import { useOptions } from "@/hook/useOptions";
  let option = {
  
  grid: [{
    left: "4%",
    right: "4%",
    bottom: "6%",
    height: "80%",
    containLabel: true,
  }],
  legend: {
    show: true,
    data: [],
    itemWidth: 15,
    itemHeight: 15,
    icon: 'rect',
    orient: 'horizontal',
    right: 20,
    top: 10,
    textStyle: {
      fontSize: 20,
      color: '#9EB7CC'
    },
  },
  xAxis: [{
    type: "category",
    data: new Array(12).fill().map((v, i) => `${i+1}月`), // 修改值
    axisLabel: {
      textStyle: {
        color: "rgba(232,241,249,0.65)",
        fontSize: 20
      }
    },
    axisTick: { show: false },
    splitLine: { show: false },
    axisLine: {
      lineStyle: { color: "#616F84" }
    }
  }, {
    type: 'category',
    data: new Array(12).fill().map((v, i) => `${i+1}月`), // 修改值
    axisLine: { show: false },
    axisLabel: { show: false },
    axisTick: { show: false },
    boundaryGap: true,
    xAxisIndex: 1
  }],
  yAxis: [{
    type: "value",
    name: "",
    nameGap: "14",
    nameTextStyle: {
      color: "rgba(232,241,249,0.65)",
      fontSize: 20
    },
    axisLine: {
      show: false
    },
    axisLabel: {
      formatter: "{value}",
      fontSize: 20,
      color: "#667A8E",
    },
    splitLine: {
      show: false
    },
    axisTick: {
      show: false,
    },
  }],
  series: [
    {
      name: 'Ⅰ类',
      data: [110, 120, 125, 130, 135, 140, 155, 160, 130,155, 160, 130], // 修改值
      type: 'bar',
      stack: 'total',
      barMaxWidth: 15,
      barGap: '30%',
      itemStyle: {
        color: new echarts.graphic.LinearGradient(0, 1, 0, 0, [
          // { offset: 0, color: 'rgba(251, 216, 160, 0.1)' },
          { offset: 1, color: '#FBD8A0'}
        ]),
        barBorderRadius: [0, 0, 0, 0]
      },
      label: {
        show: true,
        position: 'top',
        distance: 0,
        formatter: `{line|}`,
        rich: {
          line: {
            width: 15,
            height: 2,
            backgroundColor: '#fff'
          }
        }
      },
      zlevel: 12
    },
    {
      name: 'Ⅱ类',
      data: [116, 100, 130, 166, 108, 125, 167, 122, 105,108, 125, 167], // 修改值
      type: 'bar',
      stack: 'total',
      barMaxWidth: 15,
      barGap: '30%',
      itemStyle: {
        color: new echarts.graphic.LinearGradient(0, 1, 0, 0, [
          // { offset: 0, color: 'rgba(150, 224, 237, 0.1)' },
          { offset: 1, color: '#96E0ED'}
        ]),
        barBorderRadius: [0, 0, 0, 0],
      },
      zlevel: 12
    },
    {
      name: 'Ⅲ类',
      data: [160, 120, 100, 166, 110, 125, 167, 122, 133,100, 166, 110,], // 修值
      type: 'bar',
      stack: 'total',
      barMaxWidth: 15,
      barGap: '30%',
      itemStyle: {
        color: new echarts.graphic.LinearGradient(0, 1, 0, 0, [
          // { offset: 0, color: 'rgba(96, 255, 206, 0.1)' },
          { offset: 1, color: '#60FFCE'}
        ]),
        barBorderRadius: [0, 0, 0, 0],
      },
      zlevel: 12
    },
    {
      name: 'Ⅳ类',
      data: [160, 120, 100, 166, 110, 125, 167, 122, 133,100, 166, 110,], // 修值
      type: 'bar',
      stack: 'total',
      barMaxWidth: 15,
      barGap: '30%',
      itemStyle: {
        color: new echarts.graphic.LinearGradient(0, 1, 0, 0, [
          // { offset: 0, color: 'rgba(230, 253, 255, 0.1)' },
          { offset: 1, color: '#E6FDFF'}
        ]),
        barBorderRadius: [0, 0, 0, 0],
      },
      zlevel: 12
    },
    {
      name: 'Ⅴ类',
      data: [160, 120, 100, 166, 110, 125, 167, 122, 133,100, 166, 110,], // 修值
      type: 'bar',
      stack: 'total',
      barMaxWidth: 15,
      barGap: '30%',
      itemStyle: {
        color: new echarts.graphic.LinearGradient(0, 1, 0, 0, [
          // { offset: 0, color: 'rgba(3, 230, 254, 0.1)' },
          { offset: 1, color: '#03E6FE'}
        ]),
        barBorderRadius: [0, 0, 0, 0],
      },
      zlevel: 12
    },
    {
      name: 'Ⅵ类',
      data: [160, 120, 100, 166, 110, 125, 167, 122, 133,100, 166, 110,], // 修值
      type: 'bar',
      stack: 'total',
      barMaxWidth: 15,
      barGap: '30%',
      itemStyle: {
        color: new echarts.graphic.LinearGradient(0, 1, 0, 0, [
          // { offset: 0, color: 'rgba(21, 154, 255, 0.1)' },
          { offset: 1, color: '#159AFF'}
        ]),
        barBorderRadius: [0, 0, 0, 0],
      },
      zlevel: 12
    },
    // 阴影柱子
    {
      name: '',
      type: 'bar',
      barMaxWidth: 15,
      barGap: '-100%',
      data: new Array(9).fill(700), // 修改值， 最大值
      tooltip: {
        backgroundColor: 'transparent',
        formatter: ' ',
      },
      itemStyle: {
        normal: {
          color: 'rgba(14, 38, 69)'
        }
      },
      zlevel: 11
    },
    {
      name: '',
      type: 'bar',
      barWidth: 40,
      barGap: '-120%',
      data: new Array(9).fill(700), // 修改值，最大值
      tooltip: { show: false },
      itemStyle: {
        normal: {
          color: 'rgb(4,25,47)'
        },
      },
      zlevel: 9,
      xAxisIndex: 1
    }
  ]
};

  onMounted(() => {
    let myChart = echarts.init(document.getElementById("gqynszpjtj") as HTMLElement);
  
    myChart.setOption(option);
  });
  </script>
  
  <style></style>
  